<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/common/taglib.jsp"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><spring:message code="main.title" /></title>
<meta name="title" content="<spring:message code="main.title"/>" />
<link href="/css/reset.css" type="text/css" rel="stylesheet" />
<link href="/css/common2.css" type="text/css" rel="stylesheet" />
<link href="/css/layout.css" type="text/css" rel="stylesheet" />
<link href="/css/ui.css" type="text/css" rel="stylesheet" />
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="/js/jquery.sidr.min.js" type="text/javascript"></script>
<script src="/js/fakeselect.js" type="text/javascript"></script>
<script src="/js/ui.js" type="text/javascript"></script>
<script src="/js/audiojs/modernizr.custom.22180.js"></script>
<script src="/js/audiojs/audio.js"></script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=6713674deabef64c9c09b1076a5e169e"></script>
<script src="/js/common.js" type="text/javascript"></script>
<script type="text/javascript">
	var itemList = new Array();
	var itemListHtml = "";
	var oMap = null;
	var oIcon = null;
	var currentContentsIndex = 0;
	var oInfoWnd = null;
	var currentAreaCd = "${searchVO.areaCd}";
	<c:forEach var="itemInfo"  items="${resultList.list}" varStatus="counter">
		itemList.push({itemId:'${itemInfo.itemId}', itemNm:'${itemInfo.itemNm}', latitude:'${itemInfo.latitude}', longitude:'${itemInfo.longitude}'});
		itemListHtml += "<li title='${itemInfo.itemNm}'><a href=\"javascript:moveCenter(${counter.index})\">${fn:substring(itemInfo.itemNm, 0, 15)}</a></li>";
	</c:forEach>
</script>
<script type="text/javascript">
$(document).ready(function() {
		//좌측 메뉴
		$("#itemList").html(itemListHtml);
		fncSetMap();
		$('#simple-menu').sidr({
		body: '.electron_map'
		});
		$( "#simple-menu" ).toggle(
			function() {
				var height = $(window).height()-102;
				var width = $(window).width();
				oMap.setSize(new nhn.api.map.Size(width, height));
				$( "#simple-menu" ).css({"background":"url(/img/btn_open.png)"});
			},
			function() {
				$( "#simple-menu" ).css({"background":"url(/img/btn_close.png)"});
				var height = $(window).height()-102;
				var width = $(window).width()-200;
				oMap.setSize(new nhn.api.map.Size(width, height));
			}
		);
		
});

function fncSetMap() {
	var latitude = 36.836648; 
	var longitude = 127.923234; 
	var defaultLevel = 3;
	$("#map_canvas").html("");
	if(itemList != null && itemList.length > 0) {
		defaultLevel = 8;
		latitude = itemList[0].latitude; 
		longitude = itemList[0].longitude; 
	}
		
		fncSetAreaName(${resultList.listCount});
		var height = $(window).height()-102;
		var width = $(window).width()-200;
		var firstPoint = new nhn.api.map.LatLng(latitude, longitude);
		
		oMap = new nhn.api.map.Map(document.getElementById('map_canvas'), { 
						point : firstPoint,
						zoom : defaultLevel,
						enableWheelZoom : true,	
						enableDragPan : true,
						enableDblClickZoom : false,
						mapMode : 0,
						activateTrafficMap : false,
						activateBicycleMap : false,
						minMaxLevel : [ 1, 14 ],
						size : new nhn.api.map.Size(width, height)		});
		
		var oSlider = new nhn.api.map.ZoomControl();
		oMap.addControl(oSlider);
		oSlider.setPosition({
			top : 10,
			right : 10
		});
		
		var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
		oMap.addControl(oMapTypeBtn);
		oMapTypeBtn.setPosition({
			bottom : 10,
			right : 60
		});
		
		/*
		var oThemeMapBtn = new nhn.api.map.ThemeMapBtn();
		oThemeMapBtn.setPosition({
			bottom : 10,
			right : 10
		});
		oMap.addControl(oThemeMapBtn);
		
		var oBicycleGuide = new nhn.api.map.BicycleGuide(); // - 자전거 범례 선언
		oBicycleGuide.setPosition({
			top : 10,
			right : 10
		}); // - 자전거 범례 위치 지정
		oMap.addControl(oBicycleGuide);// - 자전거 범례를 지도에 추가.

		var oTrafficGuide = new nhn.api.map.TrafficGuide(); // - 교통 범례 선언
		oTrafficGuide.setPosition({
			bottom : 30,
			left : 10
		});  // - 교통 범례 위치 지정.
		oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.
		
		var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
		trafficButton.setPosition({
			bottom:10, 
			right:150
		}); // - 실시간 교통지도 버튼 위치 지정
		oMap.addControl(trafficButton);
		*/
		var oSize = new nhn.api.map.Size(28, 37);
		var oOffset = new nhn.api.map.Size(14, 37);
		oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
		
		oInfoWnd = new nhn.api.map.InfoWindow();
		oInfoWnd.setVisible(false);
		oMap.addOverlay(oInfoWnd);

		oInfoWnd.setPosition({
			top : 20,
			left :20
		});

		var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
		oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.

		oInfoWnd.attach('changeVisible', function(oCustomEvent) {
			if (oCustomEvent.visible) {
				oLabel.setVisible(false);
			}
		});
		/*
		var oPolyline = new nhn.api.map.Polyline([], {
			strokeColor : '#f00', // - 선의 색깔
			strokeWidth : 5, // - 선의 두께
			strokeOpacity : 0.5 // - 선의 투명도
		}); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
		oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.
		*/
		for(var i = 0; i < itemList.length; i++) {
			var point = new nhn.api.map.LatLng(itemList[i].latitude, itemList[i].longitude);
			var oMarker = new nhn.api.map.Marker(oIcon, { title : (i+1)+". "+itemList[i].itemNm  });
			oMarker.setPoint(point);
			oMap.addOverlay(oMarker);
		}
		
		
		oMap.attach('mouseenter', function(oCustomEvent) {

			var oTarget = oCustomEvent.target;
			// 마커위에 마우스 올라간거면
			if (oTarget instanceof nhn.api.map.Marker) {
				var oMarker = oTarget;
				oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
			}
		});

		oMap.attach('mouseleave', function(oCustomEvent) {

			var oTarget = oCustomEvent.target;
			// 마커위에서 마우스 나간거면
			if (oTarget instanceof nhn.api.map.Marker) {
				oLabel.setVisible(false);
			}
		});

		oMap.attach('click', function(oCustomEvent) {
			var oPoint = oCustomEvent.point;
			var oTarget = oCustomEvent.target;
			oInfoWnd.setVisible(false);
			
			// 마커 클릭하면
			if (oTarget instanceof nhn.api.map.Marker) {
				// 겹침 마커 클릭한거면
				if (oCustomEvent.clickCoveredMarker) {
					return;
				}
				// - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며, 
				// - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
				// - 단, DIV 의 position style 은 absolute 가 되면 안되며, 
				// - absolute 의 경우 autoPosition 이 동작하지 않습니다. 
				currentContentsIndex = eval(oTarget.getTitle().substring(0, oTarget.getTitle().indexOf(".")))-1;
				
				var param = { itemId : itemList[currentContentsIndex].itemId, viewType : VIEW_LAYER};
				$.get( "/item/itemData.do", param, function( data ) {
					
					
					oInfoWnd.setContent(data);
					
					var a = audiojs.createAll();
					var audio = a[0];
		            
		            oInfoWnd.setPoint(oTarget.getPoint());
					oInfoWnd.setPosition({right : -278, top : 340});
					oInfoWnd.setVisible(true);
					oInfoWnd.autoPosition();
					return;
				});

				return;
			}
			/*
			var oMarker = new nhn.api.map.Marker(oIcon, { title : '마커 : ' + oPoint.toString() });
			oMarker.setPoint(oPoint);
			oMap.addOverlay(oMarker);

			var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.
			aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
			oPolyline.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
			*/
		});
}

function fncChangeArea1() {
	currentAreaCd = $("#region1 option:selected").val();
	$("#currentPage").val(1);
	fncSelectItemList(currentAreaCd);
	fncChangeArea("region2", currentAreaCd);
	$("#region3").html("<option value=''>전체</option>");
}

function fncChangeArea2() {
	currentAreaCd = $("#region2 option:selected").val();
	$("#currentPage").val(1);
	fncSelectItemList(currentAreaCd);
	fncChangeArea("region3", currentAreaCd);
}

function fncChangeArea3() {
	currentAreaCd = $("#region3 option:selected").val();
	$("#currentPage").val(1);
	fncSelectItemList(currentAreaCd);
}

function fncSelectItemList(areaCd) {
	var page = $("#currentPage").val();
	$.getJSON('/item/itemList.do', {areaCd:areaCd, page:page}, function(data) {
		
		var resultList = data.resultList.list;
		itemList = new Array();
		itemListHtml = "";
		var firstPoint = null;
		if(resultList.length > 0){
			firstPoint = new nhn.api.map.LatLng(resultList[0].latitude, resultList[0].longitude);
			for(var i = 0; i < resultList.length; i++) {
				var itemInfo = resultList[i];
				itemList.push({itemId:itemInfo.itemId, itemNm:itemInfo.itemNm, latitude:itemInfo.latitude, longitude:itemInfo.longitude});
				itemListHtml += "<li title=\""+itemInfo.itemNm+"\"><a href=\"javascript:moveCenter("+i+")\">"+itemInfo.itemNm.substring(0, 15)+"</a></li>";
			}
		}
		fncSetAreaName(data.resultList.listCount);
		$("#itemList").html(itemListHtml);
		/*
		var paginate = $(".paginate_complex > a");
		for(var i = 0; i < paginate.length; i++) {
			var strong = $(paginate[i]).find("strong");
			if(strong.length > 0) {
				$(paginate[i]).html(i+1);
			} else {
				if(i+1 == page) {
					$(paginate[i]).html("<strong>"+page+"</strong>");
				}
			}
		}
		*/
		$(".paginate_complex").html(data.paginationContents);
		fncSetMap();
	});
}

function fncSetAreaName(totalCount) {
	var areaName = $("#region1 option:selected").text();
	
	if($("#region2 option:selected").val() != "") {
		areaName += " "+ $("#region2 option:selected").text();	
		
		if($("#region3 option:selected").val() != "") {
			areaName += " "+ $("#region3 option:selected").text();
		}
	}
	
	$("#areaTitle").html("<strong>'"+areaName+"'</strong>검색결과 총 <em>"+totalCount+"</em>건");
}

function fncChangeArea(cNm, areaCd) {
	$.getJSON('/item/changeArea.do?areaCd='+areaCd, function(data) {
		var resultList = data.regionList;
		var itemListHtml = "";
		itemListHtml += "<option value=''>전체</option>";
		if(resultList.length > 0){
			for(var i = 0; i < resultList.length; i++) {
				var region = resultList[i];
				itemListHtml += "<option value=\""+region.codeId+"\">"+region.codeName+"</option>";
			}
		}
		$("#"+cNm).html(itemListHtml);
	});
}

function moveCenter(index) {
	oMap.setCenterAndLevel(new nhn.api.map.LatLng(itemList[index].latitude, itemList[index].longitude), 11);
}

function fncPage(page) {
	$("#currentPage").val(page);
	fncSelectItemList(currentAreaCd);
}

function popupClose() {
	oInfoWnd.setVisible(false);
}
	</script>
</head>
<body class="bg_no">
<div class="">
	<!-- 팝업상단 -->
	<div class="pop_header">
		<h1><a href="#"><img src="/img/t_logo.png" alt="한국의 논매기소리"/></a></h1>
		<p class="electron_tit"><img src="/img/pop_map_tit.gif" alt="전자지도"/></p>
		<!-- 검색 -->
		<div class="form_box">
			<form method="post" action="" >
				<fieldset class="">
					<legend>검색창</legend>
					<input type="text" id="keyword" title="내용을 입력하세요" name="keyword" value="" class="key_inpt" style="width:237px;"/>
					<input type="image" src="/img/pop_btn_sch.gif" alt="검색" title="검색" class="pop_sch"/> 
				</fieldset> 
			</form>
		</div>
		<!-- //검색 -->
	</div>
	<!-- //팝업상단 -->
	<div class="electron_map" style="left: 203px">
		<!-- left 메뉴 -->
		<a id="simple-menu" href="#sidr">Toggle 버튼</a>
		<div id="sidr" style="display: block; left: 0px;">
			<p id="areaTitle"><strong>'충남 공주시'</strong>검색결과 총 <em>237</em>건</p>
			<ul class="ellip" id="itemList"><!-- 최대 17줄 표시 -->
				
			</ul>
			<!-- 페이지 네비게이션 -->
			<div class="paginate_box">
				<div class="paginate_complex">
					<ui:pagination paginationInfo="${paginationInfo}" type="image" jsFunction="fncPage" />
				</div>
				<input type="hidden" name="page" id="currentPage" />
			</div>
			<!-- //페이지 네비게이션 -->
		</div>
		<!-- //left 메뉴 -->
		<div class="muti_sel">
			<!-- 첫번째 -->
			<select class="bg_sel" style="width:80px;" id="region1" onchange="fncChangeArea1()">
				<c:forEach var="region" items="${regionList1}">
					<option value="${region.codeId }" ${region.codeId eq fn:substring(searchVO.areaCd,0,4) ? "selected='selected'" : ''}>${region.codeName }</option>	
				</c:forEach>
			</select>
			<!-- //첫번째 -->
			<!-- 두번째 -->
			<select style="width:80px;"  id="region2" onchange="fncChangeArea2()">
				<option value="">전체</option>
				<c:forEach var="region" items="${regionList2}">
					<option value="${region.codeId }" ${region.codeId eq searchVO.areaCd ? "selected='selected'" : ''}>${region.codeName }</option>	
				</c:forEach>
			</select>
			<!-- //두번째 -->
			<!-- 세번째 -->
			<select style="width:80px;"  id="region3" onchange="fncChangeArea3()">
				<option value="">전체</option>
			</select>
			<!-- //세번째 -->
		</div>
		<div class="" id="map_canvas" >
			
		</div>
	</div>
</div>
</body>
</html>